<link rel="stylesheet" href="/public/dialog/dialog.css" />
<style>
    html,body,#layout{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .header{
        background: url(/public/images/exam_bg.png) repeat-x;
        width: 100%;
        height: 360px;
        position: relative;
        color: #fff;
    }
    .header .header-wrap{
        position: relative;
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
    }
    .header h1{
        font-size: 30px;
        text-align: center;
        margin-top: 130px;
        position: relative;
        width: 100%;
        font-weight: normal;
    }
    .header p{
        text-align: center;
        font-size: 14px;
        color: #ddd;
    }
    .header .info{
        position: absolute;
        color: #32a1ff;
        font-size: 14px;
        right: 0px;
        top:20px;
    }
    .content .title{
        width: 100%;
        height: 50px;
    }
    .content .title{
        background: #ebebec;
    }
    .content .title .title-wrap{
        width: 960px;
        height: 100%;
        margin: 0 auto;
        padding: 0 20px;
        background: #ebebec;
    }
    .timer{
        float: right;
        font-size: 14px;
        line-height: 50px;
        color: #ff9d13;
        visibility: hidden;
    }
    .main-timer.timer{
        float: none;
        visibility: visible;
    }
    .is_stuck .timer{
        visibility: visible;
    }
    .content .title h2{
        margin: 0;
        padding: 0;
        font-size: 18px;
        color: #333;
        line-height: 50px;
        font-weight: normal;
    }
    .question-list{
        width: 1000px;
        margin: 0 auto;
        color: #333;
        list-style: none;
        color: #333;
        padding:20px 0px;
    }
    .question-list li{
        padding: 20px 0px;
        padding-left: 30px;
    }
    .question-list li h3{
        font-size: 16px;
        padding: 0;
        margin: 0;
        line-height: 24px;
        text-indent: 10px;
    }
    .question-list li .options{
        color: #666;
        margin-top: 10px;
        padding-left: 30px;
        font-size: 14px;
        line-height: 24px;
    }
    .question-list li p{
        padding: 0;
        margin: 0;
    }
    .question-list li.even{
        background: #f9f9f9;
    }
    .submit-wrap{
        width: 100%;
        text-align: center;
        padding-bottom: 50px;
    }
    .submit-wrap .button{
        width: 320px;
        height: 50px;
        line-height: 50px;
        background: #32a1ff;
        color: #fff;
        text-align: center;
        font-size: 20px;
        border: none;
        border-radius: 2px;
        /*margin-top: 20px;*/
        cursor: pointer;
        display: inline-block;
    }
    label{
        cursor: pointer;
    }

    .dialog .btn{
        display: inline-block;
        padding: 0px 20px;
        height: 34px;
        line-height: 34px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        border:1px solid transparent;
    }
    .dialog .btn.btn-default{
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }
    .dialog .btn.btn-primary{
        color: #fff;
        background-color: #32a1ff;
        border-color: #32a1ff;
    }
</style>
<div id="layout">
<form method="post" id="exam_form">
    <div class="header">
        <div class="header-wrap">
            <h1>{{examinfo.exam_name}}</h1>
            <p>
                考试总分:{{examinfo.total}}分<br/>
                <span class="timer main-timer">剩余时间:<span class="timelimit">{{timelimit}}</span>分钟</span>
            </p>
            <span class="info">欢迎{{userinfo.user_name}}参加考试</span>
        </div>
    </div>

    <div class="content">

        <div class="title sticky_column">
            <div class="title-wrap">
                <span class="timer">剩余时间<span class="timelimit">{{timelimit}}</span>分钟</span>
                <h2>一、判断题（每小题{{examinfo.exam_tfng.score}}分，{{examinfo.exam_tfng.num}}小题，共{{examinfo.exam_tfng.total}}分）</h2>
            </div>
        </div>
        <ul class="question-list">
            {{#each tfng_list}}
                <li>
                    <h3>{{plus @index}}. {{eq_title}}</h3>
                    <div class="options" data-loki="{{$loki}}">
                        <p>
                            <input type="radio" name="{{$loki}}" id="tfng_{{$loki}}_A" value="A" />
                            <label for="tfng_{{$loki}}_A">{{A}}</label>
                        </p>
                        <p>
                            <input type="radio" name="{{$loki}}" id="tfng_{{$loki}}_B" value="B" />
                            <label for="tfng_{{$loki}}_B">{{B}}</label>
                        </p>
                    </div>
                </li>
            {{/each}}
        </ul>

        <div class="title sticky_column">
            <div class="title-wrap">
                <span class="timer">剩余时间<span class="timelimit">{{timelimit}}</span>分钟</span>
                <h2>二、单选题（每小题{{examinfo.exam_single.score}}分，{{examinfo.exam_single.num}}小题，共{{examinfo.exam_single.total}}分）</h2>
            </div>
        </div>

        <ul class="question-list">
            {{#each single_list}}
                <li>
                    <h3>{{plus @index}}. {{eq_title}}</h3>
                    <div class="options" data-loki="{{$loki}}">
                        <p>
                            <input type="radio" name="{{$loki}}" id="single_{{$loki}}_A" value="A" />
                            <label for="single_{{$loki}}_A">{{A}}</label>
                        </p>
                        <p>
                            <input type="radio" name="{{$loki}}" id="single_{{$loki}}_B" value="B" />
                            <label for="single_{{$loki}}_B">{{B}}</label>
                        </p>
                        <p>
                            <input type="radio" name="{{$loki}}" id="single_{{$loki}}_C" value="C" />
                            <label for="single_{{$loki}}_C">{{C}}</label>
                        </p>
                        <p>
                            <input type="radio" name="{{$loki}}" id="single_{{$loki}}_D" value="D" />
                            <label for="single_{{$loki}}_D">{{D}}</label>
                        </p>
                    </div>
                </li>
            {{/each}}
        </ul>


        <div class="title sticky_column">
            <div class="title-wrap">
                <span class="timer">剩余时间<span class="timelimit">{{timelimit}}</span>分钟</span>
                <h2>三、多选题（每小题{{examinfo.exam_multiple.score}}分，{{examinfo.exam_multiple.num}}小题，共{{examinfo.exam_multiple.total}}分）</h2>
            </div>
        </div>
        <ul class="question-list">
            {{#each multiple_list}}
                <li>
                    <h3>{{plus @index}}. {{eq_title}}</h3>
                    <div class="options" data-loki="{{$loki}}">
                        <p>
                            <input type="checkbox" name="{{$loki}}" id="multiple_{{$loki}}_A" value="A" />
                            <label for="multiple_{{$loki}}_A">{{A}}</label>
                        </p>
                        <p>
                            <input type="checkbox" name="{{$loki}}" id="multiple_{{$loki}}_B" value="B" />
                            <label for="multiple_{{$loki}}_B">{{B}}</label>
                        </p>
                        <p>
                            <input type="checkbox" name="{{$loki}}" id="multiple_{{$loki}}_C" value="C" />
                            <label for="multiple_{{$loki}}_C">{{C}}</label>
                        </p>
                        <p>
                            <input type="checkbox" name="{{$loki}}" id="multiple_{{$loki}}_D" value="D" />
                            <label for="multiple_{{$loki}}_D">{{D}}</label>
                        </p>
                    </div>
                </li>
            {{/each}}
        </ul>

        <div class="submit-wrap">
            <button type="button" id="submitBtn" class="button"><span>交 卷</span></button>
        </div>


    </div>
</form>
</div>


<script src="/public/jquery.min.js"></script>
<script src="/public/jquery.sticky-kit.min.js"></script>
<script src="/public/dialog/dialog.js"></script>

<script>

    document.oncontextmenu=new Function('event.returnValue=false;');
    document.onselectstart=new Function('event.returnValue=false;');
    $(function () {
        $(".sticky_column").stick_in_parent();

        function submit(type){
            var data = $('#exam_form').serialize();
            var url = '/submit';
            if(!type){
                url = '/record';
            }
            $.post(url,data,function (res) {
                if(res.msg !== 'succ'){
                    if(res.msg == 'logout'){
                        $.dialog.alert('您已经完成交卷,您本次的得分为<b style="font-size: 20px;">'+res.score+'</b>分<br/>点击下面按钮退出考试!').onClose(function (response) {
                            window.location.href = '/logout';
                        });
                    }else{
                        $.dialog.alert(res.msg);
                    }
                    setTimeout(function () {
                        window.location.href = '/logout';
                    },10000);
                };
            })
        };

        submit();

        $('#submitBtn').click(function (event) {
            event.stopPropagation();

            var data = $('#exam_form').serialize();
//            console.log(data);
            var unFinishNum = 0, finishNum = 0;
            $('.options').each(function(){
                var loki = $(this).data('loki');
                var val = $(this).find('input[name='+loki+']:checked').val();
                if(val){
                    finishNum ++
                }else{
                    unFinishNum ++
                }
            });

            var info = '您已经完成<b>'+finishNum+'</b>题,还剩<b style="color: red">'+unFinishNum+'</b>题未答,<br/>是否确认交卷,交卷后无法修改.'
            $.dialog.confirm(info,{ok: "确定交卷", cancel: "取消"}).onClose(function (response) {
                if (response) {
                    submit('end');
                } else {
                    console.log('close');
                }
            });
        });


        var timelimit = parseInt({{timelimit}});
        setInterval(function () {
            if(timelimit > 0){
                timelimit --;
                $('.timelimit').text(timelimit);
            }else{
                submit('end');
            }
        },60000);


        setInterval(function () {
            submit();
        },300000);

    });
</script>